<template>
    <nav>
        <!-- 声明式导航 -->
        <ul>
            <router-link to="film" tag="li" active-class="myactive">
                <i class="iconfont icon-video"></i>
                film
            </router-link>
            <router-link to="cinema" tag="li" active-class="myactive">
                <i class="iconfont icon-all"></i>
                cinema
            </router-link>
            <router-link to="center" tag="li" active-class="myactive">
                <i class="iconfont icon-account"></i>
                center
            </router-link>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
.myactive {
    color: red;
}
nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background: white;
    ul {
        display: flex;
        li {
            flex: 1;
            line-height: 50px;
            text-align: center;
        }
    }
}
</style>
